/* TOP BAR */
div#top{background: url(http://riconada.allalla.com/style/stripTopBar.jpg) repeat-x;   height:54px; width:100%;
box-shadow:0px 1px 2px rgba(0,0,0,0.4);}
div#topBox1{margin-top:8px;}
div#topBox2{padding:10px 0px 0px 0px; width:300px; color:#666;  left:230px;}
div#topBox3{margin-top:11px; width:388px;  right:0px;}
div#topBox2 div {float:left; height:30px; margin-left:25px;}
div#topBox2i1 {width:35px; background-image: url(home.png), url(home_over.png);}
div#topBox2i1:hover {width:35px; background: url(home_over.png);}
div#topBox2i2 {width:45px; background-image: url(guestbook.png), url(guestbook_over.png);}
div#topBox2i2:hover {width:45px; background: url(guestbook_over.png);}
div#topBox2i3 {width:29px; background-image: url(gear.png), url(gear_over.png);}
div#topBox2i3:hover {width:29px; background: url(gear_over.png);}
div#topBox2i4 {width:36px; background-image: url(donate.png), url(donate_over.png);}
div#topBox2i4:hover {width:36px; background: url(donate_over.png);}
#searchField{background-image: url(sfk.png), url(sfFocus.png); border:none; height:30px; width:331px; outline:none; background-color:transparent; color:#FEE1A5; padding-left:4px; padding-right:4px;}
/* TOP BAR END */
/*----------------------- TUTORIAL INDEX PAGE BODY SECTION -----------------*/
#libraryBody{margin-left:32px; line-height:1.7em;}
#libraryBodyList{ margin-left:24px;}
.libraryBanners{ margin-left:20px; margin-top:12px;}
/*----------------------- TUTORIAL INDEX PAGE TABLE OF CONTENTS -----------------*/
#tocfs{border:#666 1px solid; background:#fff; width:642px; color:#000000;}
#tocfs a:link { color:#3333FF;}
#tocfs a:visited { color:#663366;}
#tocfsl{font-weight:bold; padding:4px 10px 0px 10px; font-size:15px; border:#666 1px solid; border-bottom:none; background:#fff; color:#000000;}
/*----------------- CODE CONTAINER STYLE --------------------*/
.clear {
clear:both;
}
@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: normal;
  src: local('Permanent Marker'), local('PermanentMarker'), url('http://themes.googleusercontent.com/static/fonts/permanentmarker/v2/9vYsg5VgPHKK8SXYbf3sMupm9E4gBdgiUiSJePew_SQ.woff') format('woff');
}

#div_data {
    background-color: #FEFCAF;
    background-image: -moz-linear-gradient(center top , #FEFCAF, #FFFEDA);
    box-shadow: 3px 3px 3px #DDD;
    margin: 10px;
    padding: 15px 15px 15px;
	z-index:20;
	text-align:center;
	border-radius: 8px 8px 8px 8px;
	color:green;
	width:300px;
}

#div_data h2 {
    color: #1468A1;
    font-family: 'Permanent Marker',arial,serif;
    font-size: 22px;
    margin: 0 0 12px !important;
    text-align: center;
}

#div_data input{
	margin:5px;
}

.success{
	
}

.exists{
	color:red;
}

.clear{
	clear:both;
}

img{
	border:1px solid #333;
	box-shadow: 3px 3px 3px #333;
}

/*
Di bawah ini nanti 
untuk Drag and Drop
*/
#dropbox {
	width: 300px;
	min-height: 100px;
	border: 2px solid #DDD;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	background-color: #FEFFEC;
	text-align: center;
	color: #BBB;
	font-size: 2em;
	font-family: Arial, sans-serif;
}

#dropbox_preview img{
	width:100px;
}
/* Tutorial */

.tutorial-notice {
	background: #cfdeea url('tutorial_notice.jpg') no-repeat 17px 12px;
	border: 1px solid #bdcbd6;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-size: 0.92em;
	margin: 10px;
	padding: 14px 14px 14px 50px;
color: #514721;
}
.code {
	background: #faf0d1 url('tutorial_code.jpg') no-repeat 17px 12px;
	border: 1px solid #e4dbbf;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-family: "Courier New", Courier, monospace;
	font-size: 0.92em;
	margin: 10px;
	padding: 14px 14px 14px 50px;
color: #514721;
}

/* LEFT MENU */
#leftmenu {
background:#000;
width:220px;
margin-left:5px;
}
.leftmenuTitle  {
margin:10px 0px 10px 0px;
color:#CCC;
font-size:12px;
font-weight:bold;
cursor: default;
}
#leftmenu ul {
list-style: none; font-size:14px;
margin: 0px;
padding: 0px;
border: none;
}
#leftmenu ul li {
margin-bottom: 2px;
padding: 0px;
}
#leftmenu ul li a {
display: block;
background-image:url(menubtn.jpg), url(menubtnOver.jpg);
padding: 8px 0px 0px 28px;
text-decoration: none;
text-shadow:1px 1px 1px #000;
color: #F8B152;
width:192px;
height:26px;
}
#leftmenu ul li a:hover, #leftmenu ul li a:focus {
color: #F8B152;
background-image:url(menubtnOver.jpg);
}
/* LEFT MENU END */

#libraryBody{margin-left:32px; line-height:1.7em;}
#libraryBodyList{ margin-left:24px;}
.libraryBanners{ margin-left:20px; margin-top:12px;}